<template>
  <MenuPage>
      <template slot="search">
        <Button
          type="primary"
          ghost
          class="header-btn md-add-jh"
          style="height: 32px;margin-right: 15px"
          @click="creatExperBtn"
          ><i class="el-icon-edit"></i>创建{{ pageTitle }}</Button
        >
        <Divider type="vertical" />
        <Checkbox v-model="createByMe" @on-change="changeCreatBox">由我创建</Checkbox>
        <i-select
          v-model="queryVideoInfo.orderInfo"
          style="width: 150px"
          @on-change="expSceneOnChange(1)"
        >
          <i-option value="1">创建时间倒序</i-option>
          <i-option value="2">创建时间升序</i-option>
          <i-option value="3">播放次数倒序</i-option>
          <i-option value="4">播放次数升序</i-option>
          <i-option value="5">点赞次数倒序</i-option>
          <i-option value="6">点赞次数升序</i-option>
          <i-option value="7">已学总人数倒序</i-option>
          <i-option value="8">已学总人数升序</i-option>
        </i-select>
        <Select filterable
          clearable
          placeholder="是否自学"
          v-model="isSelf"
          style="width: 150px;margin-left: 15px;"
          @on-change="expSceneOnChange(1)"
        >
          <i-option :value="0">否</i-option>
          <i-option :value="1">是</i-option>
        </Select>
        <!--<i-select clearable placeholder="难度" v-model="queryVideoInfo.difficulty" style="width: 150px;margin-left: 15px" @on-change="expSceneOnChange(1)">
          <i-option value="Simple">简单</i-option>
          <i-option value="Medium">中等</i-option>
          <i-option value="Hard">较难</i-option>
        </i-select>
        <i-select clearable v-model="queryVideoInfo.typeCode" placeholder="类型" style="width: 150px;margin-left: 15px" @on-change="expSceneOnChange(1)">
          <i-option v-for="(value,key) in expClassify" :value="value.dictid" :key="key">{{value.dictname}}</i-option>
        </i-select>
        <i-select clearable placeholder="可见范围" style="width: 150px;margin-left: 15px" v-model="queryVideoInfo.isPublic" @on-change="expSceneOnChange(1)">
          <i-option value="2">系统</i-option>
          <i-option value="1">单位</i-option>
          <i-option value="0">个人</i-option>
        </i-select>-->
        <Input
          clearable
          v-model.trim="queryVideoInfo.name"
          placeholder="视频名称"
          @on-change="expSceneOnChange(1)"
          style="width: 180px;margin-left: 15px;"
        />
        <!--<Input v-model.trim="queryVideoInfo.creatorName" search placeholder="创建者" @on-search="expSceneOnChange(1)" style="width: 200px;margin-right: 15px;"/>-->
        <Button
          class="header-btn"
          type="primary"
          ghost
          style="height: 32px;margin-left: 9px;"
          @click="refreshVideoList()"
          ><i class="el-icon-refresh-right"
        /></Button>
      </template>
      <template slot="content">
        <div class="filter-wrap">
          <tag-select
            title="难度"
            :current="queryVideoInfo.difficulty"
            :data="diffArr"
            @on-change="changeDiff"
          ></tag-select>
          <Divider style="margin:15px 0px" />
          <tag-select
            title="方向"
            :current="queryVideoInfo.typeCodeLevel1"
            ref="directionType"
            :data="expClassifyLevel1"
            @on-change="changeTypeLevel1"
            @height-change="updateTableHei"
          ></tag-select>
          <Divider style="margin:15px 0px" />
          <tag-select
            title="类型"
            :current="queryVideoInfo.typeCode"
            ref="directionType"
            :data="expClassifyLevel2"
            @on-change="changeType"
            @height-change="updateTableHei"
          ></tag-select>
          <Divider style="margin:15px 0px" />
          <tag-select
            title="可见范围"
            :current="queryVideoInfo.isPublic"
            :data="visibilityArr"
            @on-change="changeIsPublic"
          ></tag-select>
          <Divider style="margin:15px 0px" />
        </div>
        <div class="table-wrap">
          <template v-if="showContent">
            <div
              class="exper-wrap"
              v-for="(item, key) in expSceneList"
              :key="key"
              :style="{
                marginRight: (key + 1) % spanNum == 0 ? 0 : marginRight,
                width: setExperWid,
                height: setExperHie
              }"
              @mouseleave="hideDelPop"
            >
              <!--<div>-->
              <div class="image-box">
                <img class="exper-img" :src="handleImage(item.logo)" @error="setDefImg" />
                <!--<p class="out-play-icon">
                                  <img src="../../assets/exper/play.png" alt='播放' @click="playVideo(item)" class="exper-icon" style="width:30px">
                              </p>-->
                <div class="img-mask">
                  <div class="exper-top">
                    <div class="exper-left">
                      <div class="exper-name" :title="item.ecname">{{ item.name }}</div>
                      <div class="exper-info">
                        <p class="spaceBetween">
                          <small class="exper-user" :title="item.creatorName"
                            >创建者：{{ item.creatorName }}</small
                          >
                          <small class="exper-tag"
                            >{{ handleDiffcult(item.difficulty) }}·<span
                              :style="{ color: handlePublic(item.isPublic).color }"
                              >{{ handlePublic(item.isPublic).text }}</span
                            ></small
                          >
                        </p>
                        <p class="spaceBetween">
                          <small class="exper-time"> 时间：{{showTimeNotSecond(item.createTime) }}</small>
                        </p>
                        <p class="spaceBetween">
                          <small
                            class="exper-type"
                            style="margin-right:5px;"
                            :title="handleDirection(item.typeCode)"
                          >
                            方向：{{ handleDirection(item.typeCode) }}</small
                          >
                          <small
                            class="exper-type"
                            style="margin-right:5px;"
                            :title="handleTypeCode(item.typeCode)"
                          >
                            类型：{{ handleTypeCode(item.typeCode) }}</small
                          >
                        </p>
                        <p class="spaceBetween">
                          <small class="exper-type" style="margin-right:5px;">
                            是否自学：{{ item.selfType === 1 ? '是' : '否' }}</small
                          >
                        </p>
                      </div>
                      <div class="oper-btn" @click.stop="cancel">
                        <Button
                          class="exper-btn"
                          :disabled="setReBtnStatus(item)"
                          @click.stop="modifyExper(item)"
                          size="small"
                          >修改</Button
                        >
                        <Poptip
                          v-model="hideDel"
                          confirm
                          title="确定要删除这个视频吗？"
                          @on-ok="delExper(item)"
                        >
                          <Button class="exper-btn" :disabled="setReBtnStatus(item)" size="small"
                            >删除</Button
                          >
                        </Poptip>
                      </div>
                    </div>
                    <div class="exper-right">
                      <p class="spaceBetween exper-count" style="width:100%;height:50%">
                        <span title="点赞次数">
                          <img src="../../assets/exper/likes.png" alt="点赞次数" class="exper-icon" />
                          {{ item.likesCounts }}
                        </span>
                        <span title="播放次数" style="margin:0 5px">
                          <img src="../../assets/exper/plays.png" alt="播放次数" class="exper-icon" />
                          {{ item.playCounts }}
                        </span>
                        <span title="已学总人数">
                          <img
                            src="../../assets/exper/learnedcounts.png"
                            alt="已学总人数"
                            class="exper-icon"
                          />
                          {{ item.learnedCounts }}
                        </span>
                      </p>
                      <p style="cursor: pointer;">
                        <!--<Icon type="logo-youtube" @click="playVideo(item)" style="color: #fff;" :size="34"/>-->
                        <img
                          src="../../assets/exper/play.png"
                          alt="播放"
                          @click="playVideo(item)"
                          class="exper-icon"
                          style="width:30px"
                        />
                      </p>
                    </div>
                  </div>
                  <div class="exper-bottom spaceBetween">
                    <span class="exper-bottom-name">{{ item.name }}</span>
                    <span class="exper-count spaceBetween" style="max-width:48%">
                      <span>
                        <img src="../../assets/exper/likes.png" alt="点赞次数" class="exper-icon" />
                        {{ item.likesCounts }}
                      </span>
                      <span style="margin:0 10px;">
                        <img src="../../assets/exper/plays.png" alt="播放次数" class="exper-icon" />
                        {{ item.playCounts }}
                      </span>
                      <span>
                        <img
                          src="../../assets/exper/learnedcounts.png"
                          alt="已学人数"
                          class="exper-icon"
                        />
                        {{ item.learnedCounts }}
                      </span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div style="display: flex;justify-content: center;margin: 15px 0">
              <Page
                :total="expSceneTotal"
                :page-size="expScenePageSize"
                :current="queryVideoInfo.pageIndex"
                show-total
                show-elevator
                @on-change="expSceneOnChange"
              />
            </div>
          </template>
          <NoData :noDataText="showDefText" v-if="showDefImg">
  
          </NoData>
        </div>
      </template>
      <Modal
      v-model="videoModal"
      :title="videoName"
      :footer-hide="true"
      width="800"
      :mask-closable="false"
      @on-visible-change="modalChange"
    >
      <!--disablePictureInPicture="true"-->
      <div v-if="isFlv" class="video" style="width:100%;margin-top:10px;height: 440px;"></div>
      <video
        v-if="videoModal && !isFlv"
        :src="curVideoPath"
        controls="controls"
        controlsList="nodownload noremote footbar"
        style="width:100%;"
        autoplay
        id="learnVideo"
      >
        您的浏览器不支持 video 标签。
      </video>
    </Modal>
  </MenuPage>
</template>
<script>
import $ from 'jquery';
import encryption from '@/libs/encryption.js';
import { experType } from '@/api/dict.js';
import defaultImg from '@/assets/globalIcon/course.jpg';
import { delStudyVideo, queryStudyVideo } from '@/api/videoSelfStudy.js';
import { debounce,showTimeNotSecond } from '@/libs/utils';
import TagSelect from '@/components/tagSelect/tagSelect';
export default {
  components: { TagSelect },
  data() {
    return {
      showTimeNotSecond,
      isSelf: '',
      videoName: '',
      // 用户信息
      USER_ID: '',
      isRootDesigner: false,
      showProjectSelect: false,
      defaultImg, // 课件的默认图片
      // 页面设置
      fullHeight: document.documentElement.clientHeight,
      fullWidth: document.documentElement.clientWidth,
      contentHei: 'auto',
      setTableHei: 'auto',
      spanNum: 4,
      getWidth: 0,
      marginLeft: 'auto',
      marginRight: 'auto',
      setExperHie: '0',
      setExperWid: 'auto',
      setImgHei: '145px',
      // 课件数据
      expSceneList: [],
      expScenePage: 1,
      expScenePageSize: 18,
      expSceneTotal: 0,
      sceneListLoading: false,
      createByMe: false,
      selectDifficult: 'Commonly',
      searchSceneNameValue: '',
      searchSceneDesignerValue: '',
      // 课件类型
      expClassify: [],
      expClassifyLevel1: [],
      expClassifyLevel2: [],
      directionModel: 'all',
      // 缺省图
      showDefImg: true,
      showDefText: '加载中',
      showContent: false,
      queryVideoInfo: {
        pageIndex: 1,
        pageSize: 18,
        typeCodeLevel1: 'All',
        typeCode: 'All',
        isPublic: 'All',
        difficulty: 'All',
        orderInfo: '1'
      },
      diffArr: [
        {
          key: 'Simple',
          value: '简单'
        },
        {
          key: 'Medium',
          value: '中等'
        },
        {
          key: 'Hard',
          value: '较难'
        }
      ],
      visibilityArr: [
        {
          key: '0',
          value: '个人'
        },
        {
          key: '1',
          value: '单位'
        },
        {
          key: '2',
          value: '系统'
        }
      ],
      videoModal: false,
      curVideoPath: '',
      hideDel: false,
      showMore: false,
      queryHeight: 216,
      isFlv: false
    };
  },
  computed: {
    pageTitle () {
      //当前菜单显示名
      return this.$route.meta.title;
    },
  },
  created() {
    // 获取用户id
    let November = sessionStorage.getItem('November');
    November = JSON.parse(encryption.SelfUseDecrypt(November));
    this.USER_ID = November.userId;
    this.isRootDesigner = November.isRootDesigner;
    //赋值查询条件
    let queryObj = sessionStorage.getItem('queryObj');
    if (queryObj) {
      let params = JSON.parse(queryObj);
      this.queryVideoInfo = params;
      this.createByMe = this.queryVideoInfo.creator == this.USER_ID;
      sessionStorage.removeItem('queryObj');
    }
  },
  mounted() {
    // 课件分类
    this.classification();
    this.setStyle();
    window.addEventListener('resize', this.setStyle, true);
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('resize', this.setStyle, true);
    });
  },
  methods: {
    // 设置高度
    setStyle: debounce(function() {
      let _this = this;
      window.fullHeight = document.documentElement.clientHeight;
      window.fullWidth = document.documentElement.clientWidth;
      this.fullHeight = window.fullHeight;
      this.fullWidth = window.fullWidth;
      this.contentHei = this.fullHeight - 60 + 'px'; // 80是头部高度  60是上下padding
      this.contentWid = this.fullWidth - 200 - 100; // 200是菜单栏宽度  100是左右padding
      this.setTableHei = this.fullHeight - 60 - 52 - 49 - this.queryHeight + 'px';
      let xishu = 0;
      if (this.fullWidth <= 1680) {
        this.spanNum = 3;
        this.expScenePageSize = 6;
        xishu = 0.12;
      }
      if (this.fullWidth > 1680 && this.fullWidth <= 2080) {
        this.spanNum = 4;
        this.expScenePageSize = 16;
        xishu = 0.12;
      }
      if (this.fullWidth > 2080) {
        this.spanNum = 5;
        this.expScenePageSize = 20;
        xishu = 0.1;
      }
      this.marginRight = '2%';
      let experAvailableWidth = 1 - 0.02 * (this.spanNum - 1);
      let experWid = (100 - 2 * (this.spanNum - 1)) / this.spanNum;
      this.setExperWid = experWid + '%';
      this.setExperHie = this.contentWid * (experWid / 100) * 0.65 + 'px';
      if (
        this.expSceneTotal > 0 &&
        this.queryVideoInfo.pageIndex > Math.floor(this.expSceneTotal / this.expScenePageSize)
      ) {
        this.queryVideoInfo.pageIndex =
          this.expSceneTotal / this.expScenePageSize < 1
            ? 1
            : Math.floor(this.expSceneTotal / this.expScenePageSize) + 1;
      }
      this.getVideoList();
    }, 1000),
    updateTableHei() {
      setTimeout(() => {
        this.queryHeight = document.querySelector('.filter-wrap').offsetHeight;
        this.setTableHei = this.fullHeight - 60 - 52 - 49 - this.queryHeight + 'px';
      }, 600);
    },
    // 可见范围
    handlePublic(val) {
      let obj = {
        text: '',
        color: '#8d95a6'
      };
      switch (val) {
        case 0:
          return (obj = {
            text: '个人',
            color: 'rgb(255, 165, 0)'
          });
          break;
        case 1:
          return (obj = {
            text: '单位',
            color: 'rgb(50, 205, 50)'
          });
          break;
        case 2:
          return (obj = {
            text: '系统',
            color: 'rgb(65, 105, 225)'
          });
          break;
      }
    },
    //视频列表
    getVideoList: debounce(function() {
      if (this.videoLoading) {
        //正在请求，有新的请求
        this.hasNoExecuteRequest = true;
        return;
      }
      this.videoLoading = true;
      this.showDefImg = true;
      this.showContent = false;
      this.showDefText = '加载中';
      this.queryVideoInfo.pageSize = this.expScenePageSize;
      let params = JSON.parse(JSON.stringify(this.queryVideoInfo));
      params.selfType = this.isSelf;
      if (params.typeCodeLevel1 == 'All') {
        params.typeCodeLevel1 = '';
      }
      if (params.typeCode == 'All') {
        params.typeCode = '';
      }
      params.typeCode = params.typeCode || params.typeCodeLevel1;
      if (params.difficulty == 'All') {
        params.difficulty = '';
      }
      if (params.isPublic == 'All') {
        params.isPublic = '';
      }
      if (params.orderInfo == '1') {
        (params.order = 'desc'), (params.sortBy = 'createTime');
      } else if (params.orderInfo == '2') {
        (params.order = 'asc'), (params.sortBy = 'createTime');
      } else if (params.orderInfo == '3') {
        (params.order = 'desc'), (params.sortBy = 'playCounts');
      } else if (params.orderInfo == '4') {
        (params.order = 'asc'), (params.sortBy = 'playCounts');
      } else if (params.orderInfo == '5') {
        (params.order = 'desc'), (params.sortBy = 'likesCounts');
      } else if (params.orderInfo == '6') {
        (params.order = 'asc'), (params.sortBy = 'likesCounts');
      } else if (params.orderInfo == '7') {
        (params.order = 'desc'), (params.sortBy = 'learnedCounts');
      } else if (params.orderInfo == '8') {
        (params.order = 'asc'), (params.sortBy = 'learnedCounts');
      }
      delete params.orderInfo;
      delete params.typeCodeLevel1;
      //查询条件存储
      this.queryObj = JSON.stringify(this.queryVideoInfo);
      queryStudyVideo(params)
        .then((data) => {
          if (data.code == 1) {
            this.expSceneList = data.data.items || data.data;
            this.expSceneTotal = data.data.total;
            if (this.expSceneList.length > 0) {
              this.showDefImg = false;
              this.showContent = true;
            } else {
              this.showDefImg = true;
              this.showDefText = '暂无信息';
              this.showContent = false;
            }
          } else {
            this.expSceneList = [];
            this.$Message.error(data.message);
          }
          this.videoLoading = false;
          if (this.hasNoExecuteRequest) {
            this.expSceneOnChange(1);
            this.hasNoExecuteRequest = false;
          }
        })
        .catch((error) => {
          this.showDefImg = true;
          this.showDefText = '暂无信息';
          this.videoLoading = false;
          this.$Message.error(error);
        });
    }, 500),
    refreshVideoList() {
      this.queryVideoInfo = {
        pageIndex: 1,
        pageSize: this.expScenePageSize,
        orderInfo: '1',
        typeCode: 'All',
        typeCodeLevel1: 'All',
        difficulty: 'All',
        isPublic: 'All'
      };
      this.isSelf = '';
      this.expClassifyLevel2 = this.expClassify.filter((dict) => dict.parentid);
      this.createByMe = false;
      this.getVideoList();
    },
    // 鼠标移入 移出
    enter(key) {
      this.$set(this.expSceneList[key], 'showFlag', true);
    },
    leave(key) {
      this.$set(this.expSceneList[key], 'showFlag', false);
    },
    // 过滤
    expSceneOnChange(val) {
      this.queryVideoInfo.pageIndex = val;
      this.getVideoList();
    },
    changeCreatBox(val) {
      this.queryVideoInfo.pageIndex = 1;
      //              this.createByMe = val
      if (val) {
        this.queryVideoInfo.creator = this.USER_ID;
      } else {
        this.queryVideoInfo.creator = '';
      }
      this.getVideoList();
    },
    refreshScene() {
      this.expScenePage = 1;
      this.selectDifficult = 'Commonly';
      this.createByMe = false;
      this.searchSceneNameValue = '';
      this.searchSceneDesignerValue = '';
      this.directionModel = 'all';
      this.getVideoList();
    },
    // 获取场景分类
    classification() {
      experType()
        .then((data) => {
          if (data.code == 1) {
            let attribute = data.attribute;
            this.expClassify = attribute.attribute[0].dictEntryList;
            this.expClassify.forEach((dict) => {
              dict.key = dict.dictid;
              dict.value = dict.dictname;
            });
            this.expClassifyLevel1 = this.expClassify.filter((dict) => !dict.parentid);
            this.expClassifyLevel2 = this.expClassify.filter((dict) => dict.parentid);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    changeType(name) {
      this.queryVideoInfo.typeCode = name;
      this.expSceneOnChange(1);
    },
    changeTypeLevel1(val) {
      this.queryVideoInfo.typeCode = 'All';
      if (val == 'All') {
        this.expClassifyLevel2 = this.expClassify.filter((dict) => dict.parentid);
      } else {
        this.expClassifyLevel2 = this.expClassify.filter((dict) => dict.parentid == val);
      }
      this.queryVideoInfo.typeCodeLevel1 = val;
      this.expSceneOnChange(1);
      this.$refs.directionType.updateHeight();
    },
    changeDiff(val) {
      this.queryVideoInfo.difficulty = val;
      this.expSceneOnChange(1);
    },
    changeIsPublic(val) {
      this.queryVideoInfo.isPublic = val;
      this.expSceneOnChange(1);
    },
    // 按钮点击状态
    setReBtnStatus(params) {
      let userid = params.creator;
      if ((userid === this.USER_ID || this.isRootDesigner) && params.isPublic != 2) {
        return false;
      } else {
        return true;
      }
    },
    // 困难程度
    handleDiffcult(val) {
      switch (val) {
        case 'Simple':
          return '简单';
          break;
        case 'Medium':
          return '中等';
          break;
        case 'Hard':
          return '较难';
          break;
      }
    },
    // logo
    handleImage(logo) {
      let src = '';
      if (logo) {
        if (logo.indexOf('Learn') > -1) {
          src = logo;
        } else {
          src = `/Learn/${logo}`;
        }
      } else {
        src = this.defaultImg;
      }
      return src;
    },
    setDefImg() {
      let img = event.srcElement;
      img.src = this.defaultImg;
      img.onerror = null;
    },
    //数据字典格式化
    handleTypeCode(dictid) {
      let dictMap = {};
      this.expClassify.forEach((exp) => {
        dictMap[exp.dictid] = exp.dictname;
      });
      return dictMap[dictid];
    },
    handleDirection(dictid) {
      let dictMap = {};
      let direction;
      let type = this.expClassify.find((dict) => dict.dictid == dictid);
      if (type) {
        let aaa = this.expClassify.find((dict) => dict.dictid == type.parentid);
        if (!aaa) {
          return;
        } else {
          direction = aaa.dictname;
        }
      }
      return direction;
    },
    // 删除课件
    delExper(item) {
      let id = item.id;
      delStudyVideo(id)
        .then((data) => {
          if (data.code == 1) {
            this.$Message.success({
              content: '删除成功',
              duration: 3
            });
            this.getVideoList();
          } else {
            this.$Message.error({
              content: data.message,
              duration: 3
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 创建课件
    creatExperBtn() {
      this.$router.push({
        name: 'creatLearnVideo'
      });
    },
    // 修改课件
    modifyExper(item) {
      sessionStorage.setItem('queryObj', this.queryObj);
      this.$router.push({
        name: 'creatLearnVideo',
        query: {
          id: item.id
        }
      });
    },
    // 父元素阻止冒泡事件
    cancel() {},
    playVideo(item) {
      console.log(item);
      this.videoModal = true;
      this.videoName = item.name;
      if (item.videoFilePath.split('.').pop() == 'flv') {
        //flv视频使用插件播放
        this.isFlv = true;
        setTimeout(() => {
          var videoObject = {
            container: '.video', //“#”代表容器的ID，“.”或“”代表容器的class
            plug: 'flv.js', //设置使用flv插件
            video: '/Learn/' + item.videoFilePath //视频地址
          };
          new ckplayer(videoObject); //初始化播放器
        });
      } else {
        this.isFlv = false;
        this.curVideoPath = '/Learn/' + item.videoFilePath;
      }
    },
    modalChange(status) {
      if (!status) {
        document.getElementById('learnVideo').pause();
        if (document.pictureInPictureElement) {
          document.exitPictureInPicture();
        }
      } else {
        //          		document.getElementById("learnVideo").play();
      }
    },
    hideDelPop() {
      this.hideDel = false;
    },
    slide(e) {
      let el = e.currentTarget.parentNode;
      this.showMore = !this.showMore;
      if (this.showMore) {
        this.slideEnter(el);
      } else {
        this.slideLeave(el);
      }
    },
    slideEnter(el) {
      el.style.height = 'auto';
      let eleHeight = el.offsetHeight;
      let height = window.getComputedStyle(el, null)['height'];
      el.style.height = '28px';
      let _this = this;
      //不设定延迟height不会有动画
      setTimeout(() => {
        el.style.height = height;
        _this.queryHeight = 160 + eleHeight - 28;
        _this.setTableHei = _this.fullHeight - 60 - 52 - 49 - _this.queryHeight + 'px';
      }, 20);
    },
    slideLeave(el) {
      el.style.height = '28px';
      let _this = this;
      _this.queryHeight = 160;
      _this.setTableHei = _this.fullHeight - 60 - 52 - 49 - _this.queryHeight + 'px';
    }
  }
};
</script>
<style scoped>
/*查询样式 ---开始*/

.filter-wrap {
  /* padding: 0 20px; */
  margin-top: 1em;
  font-size: 14px;
  color: #8f90a6;
}
/*查询样式 --- 结束*/

.table-wrap {
  /* padding: 0 20px; */
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  flex: auto;
  /*display: flex;
	    flex-wrap: wrap;
	    justify-content: space-between;*/
}
.exper-wrap {
  margin-bottom: 15px;
  position: relative;
  /*height: 250px;*/
  /* cursor: pointer; */
  display: inline-block;
  font-size: 14px;
  overflow: hidden;
  box-shadow: 0 0 2px #ccc;
  border-radius: 3px;
  overflow: hidden;
}

.exper-wrap:hover {
  box-shadow: 0 0 5px #472c89;
}
/*.exper-wrap:hover .out-play-icon{
    	display: none;
    }*/

.exper-wrap:hover .img-mask {
  top: 0;
}

.exper-wrap:hover .img-mask .exper-bottom {
  display: none;
}

.exper-wrap:hover .img-mask .exper-top {
  display: flex;
}
/*.exper-wrap:hover .img-mask .exper-bottom-name{
    	visibility: hidden;
    }*/

.exper-avtar {
  height: 13px;
  width: 11px;
  vertical-align: middle;
  display: inline-block;
  margin-right: 5px;
  margin-top: -3px;
}

.exper-bottom-name {
  max-width: 50%;
  white-space: pre;
  word-break: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exper-icon {
  /*height: 13px;
        width: 11px;*/
  vertical-align: text-bottom;
  /*margin-right: 5px;*/
  /*display: inline-block;
        margin-right: 5px;
        margin-left: 5px;
        margin-top: -3px;*/
}
/*.out-play-icon{
    	position: absolute;
	    height: 78%;
	    top: 0;
	    left: 0;
	    right: 0;
	    display: flex;
	    justify-content: center;
	    align-items: center;
    }*/

.exper-count {
  font-weight: bold;
}

.spaceBetween {
  display: flex;
  justify-content: space-between;
}

.time-icon {
  height: 11px;
  width: 11px;
  vertical-align: middle;
  display: inline-block;
  margin-right: 5px;
  margin-top: -2px;
}

.exper-img {
  display: block;
  width: 100%;
  height: 100%;
  /*height: 145px;*/
  /*border-radius: 6px 6px 0px 0px;*/
}

.oper-btn {
  position: absolute;
  bottom: 0;
  width: calc(100% - 20px);
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  transition: all ease-in-out 0.5s;
}

.exper-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
  font-weight: bold;
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  margin-bottom: 6px;
}

.exper-user {
  width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}
.exper-time,
.exper-type {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}
.exper-time {
  max-width: 100%;
}
.exper-type {
  max-width: 50%;
}
.defGraphWrap {
  height: 286px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.defGraph {
  height: 126px;
  width: 157px;
  background: url('../../assets/globalIcon/defGraph.png') no-repeat center center;
  background-size: 157px 126px;
}

.graphText {
  color: #888;
  font-size: 14px;
  text-align: center;
  margin-top: 20px;
}

.image-box {
  position: relative;
  height: 100%;
}

.exper-top {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
}

.exper-left {
  position: relative;
  width: 70%;
  height: 80%;
  background: var(--imagecard-mask-bgcolor);
  padding: 10px;
  /* font-size: 12px; */
  border-radius: 3px;
  /*overflow: hidden;*/
}

.exper-right {
  width: 35%;
  height: 75%;
  margin-left: 4%;
  color: #fff;
  visibility: hide;
  display: flex;
  flex-direction: column;
  /*justify-content: center;*/
  align-items: center;
}

.exper-bottom {
  width: 100%;
  height: 20%;
  align-items: center;
  color: #fff;
  /*padding: 0 10px;*/
}

.img-mask {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 80%;
  left: 0;
  /*opacity: 0;*/
  background-color: rgba(0,0,0,.4);
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.4s ease-in-out;
  align-items: flex-start;
}

.exper-info {
  color: #8d95a6;
}

.exper-btn {
  border-color: #8d95a6;
  color: #8d95a6;
}
</style>
<style>
#videoLearn .table-wrap .ivu-table-overflowX {
  overflow-x: auto;
}
</style>
